<template>
  <div>
    <el-form ref="roleformref" :model="rolForm" :inline="true" size="small">
      <el-form-item label="角色名称">
        <el-input v-model="rolForm.roleName" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="rolForm.status" placeholder="请选择状态">
          <el-option
            v-for="item in rolForm.statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectlist">查询</el-button>
        <el-button type="primary" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      size="small"
    >
      <el-table-column prop="roleName" label="角色名称" />

      <el-table-column label="角色状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 0">正常</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 1">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--编辑-->
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i
              class="el-icon-edit operationIcon"
              @click="edit(scope.row.roleId)"
            ></i>
          </el-tooltip>

          <!--用户列表-->
          <el-tooltip
            class="item"
            effect="dark"
            content="用户列表"
            placement="top"
          >
            <i
              class="el-icon-user operationIcon"
              @click="viewRoleUser(scope.row.roleId)"
            ></i>
          </el-tooltip>

          <!--菜单权限-->
          <el-tooltip
            class="item"
            effect="dark"
            content="菜单权限"
            placement="top"
          >
            <i
              class="el-icon-suitcase operationIcon"
              @click="editPermission(scope.row.roleId)"
            ></i>
          </el-tooltip>

          <!--接口权限-->
          <el-tooltip
            class="item"
            effect="dark"
            content="接口权限"
            placement="top"
          >
            <i
              class="el-icon-suitcase-1 operationIcon"
              @click="editPermissionOperation(scope.row.roleId)"
            ></i>
          </el-tooltip>

          <!--删除-->
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <i
              class="el-icon-delete operationIcon"
              v-if="!scope.row.hasChild"
              @click="deleteRow(scope.row.roleId)"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="pageSizes"
      :total="total"
      :current-page.sync="pageNo"
      :page-size.sync="pageSize"
      @current-change="selectlist"
      @size-change="selectlist"
    />
    <!--新增角色-->
    <el-dialog
      title="新增角色"
      :visible.sync="addRoleDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        ref="addRoleFormRef"
        :model="addRoleForm"
        :rules="addRoleFormRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="addRoleForm.roleName"
            type="roleName"
            placeholder="请填写角色名称"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addRoleForm.status" placeholder="请选择状态">
            <el-option
              v-for="item in addRoleFormData.statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="addRoleForm.remark"
            type="textarea"
            placeholder="请填写备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="resetRoleForm()">取消</el-button>
        <el-button
          v-loading="btnLoad"
          size="medium"
          type="primary"
          @click="addRoleSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>
    <!--编辑角色-->
    <el-dialog
      title="编辑角色"
      :visible.sync="editRoleDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        ref="editRoleFormRef"
        :model="editRoleForm"
        :rules="editRoleFormRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="editRoleForm.roleName"
            type="roleName"
            placeholder="请填写角色名称"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editRoleForm.status" placeholder="请选择状态">
            <el-option
              v-for="item in editRoleFormData.statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="editRoleForm.remark"
            type="textarea"
            placeholder="请填写备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editResetRoleForm()">取消</el-button>
        <el-button
          v-loading="editbtnLoad"
          size="medium"
          type="primary"
          @click="editRoleSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>

    <!--保存角色权限-->
    <el-dialog
      class="dolaog"
      title="保存角色权限"
      :visible.sync="editRolePermissionDialog"
      :close-on-click-modal="false"
      width="1000px"
      @close="editResetRolePermissionForm()"
    >
      <div class="flex-div">
        <!--权限菜单表单-->
        <el-table
          :data="tableRolePermissionData"
          style="margin-bottom: 20px"
          :row-key="getRowKeys"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          default-expand-all
          ref="multipleRolePermissionTable"
          @selection-change="handleRolePermissionSelectionChange"
        >
          <!--表单展示--->
          <el-table-column prop="menuName" label="菜单名称" />
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          ></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editResetRolePermissionForm()"
          >取消</el-button
        >
        <el-button
          v-loading="editbtnLoad"
          size="medium"
          type="primary"
          @click="saveRolePermissionSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>

    <!--角色用户列表-->
    <el-dialog
      class="dolaog"
      title="角色用户列表"
      :visible.sync="viewRoleUserDialog"
      :close-on-click-modal="false"
      width="1000px"
    >
      <div class="flex-div">
        <!--角色用户列表-->
        <el-table :data="tableRoleUserData" style="width: 100%">
          <!--表单展示--->
          <el-table-column prop="userName" label="用户账号" />
          <el-table-column prop="nickName" label="昵称" />
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 0">正常</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 1">禁用</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!--保存角色接口权限-->
    <el-dialog
      class="dolaog"
      title="保存角色接口权限"
      :visible.sync="editRolePermissionOperationDialog"
      :close-on-click-modal="false"
      @close="editResetRoleOperation()"
      width="1000px"
    >
      <div class="flex-div">
        <!--权限菜单表单-->
        <el-table
          :data="tableRolePermissionData"
          style="margin-bottom: 20px"
          border
          :row-key="getRowKeys"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          @row-click="roleMenuOperationInit"
          default-expand-all
        >
          <!--表单展示--->
          <el-table-column prop="menuName" label="菜单名称" />
        </el-table>

        <!--权限操作信息表单-->
        <el-table
          :data="tableRoleMenuOperationData"
          style="height: 600px; margin-bottom: 20px"
          border
          @row-click="roleOperationInit"
        >
          <!--表单展示--->
          <el-table-column prop="operationName" label="操作资源" />
        </el-table>

        <!--权限资源字段展示-->
        <el-table
          :data="tableRoleOperationData"
          style="height: 600px; margin-bottom: 20px"
          border
          @selection-change="handleRoleOperationSelectionChange"
          :row-key="getRoleOperationRowKeys"
          ref="multipleRoleOperationTable"
        >
          <!--表单展示--->
          <el-table-column prop="filedName" label="字段名" />
          <el-table-column prop="filedDes" label="字段名描述" />
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          ></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editResetRoleOperation()"
          >取消</el-button
        >
        <el-button
          v-loading="editbtnLoad"
          size="medium"
          type="primary"
          @click="saveRoleOperationSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addRole,
  roleList,
  viewRole,
  updateRole,
  deleteRole,
  viewRolePermission,
  viewRoleMenuOperation,
  viewRoleOperation,
  saveRolePermission,
  saveRoleOperation,
} from "@/api/role";
import { userListByRoleId } from "@/api/user";
import { Message } from "element-ui";
export default {
  data() {
    return {
      rolForm: {
        roleName: "",
        status: -1,
        statusOptions: [
          {
            value: -1,
            label: "请选择",
          },
          {
            value: 0,
            label: "正常",
          },
          {
            value: 1,
            label: "禁用",
          },
        ],
        pageSize: 1,
        pageNum: 10,
      },
      tableData: [],

      //新增
      addRoleDialog: false,
      addRoleForm: {
        roleName: "",
        remark: "",
        status: 0,
      },
      //添加弹窗数据源存放
      addRoleFormData: {
        statusOptions: [
          {
            value: 0,
            label: "正常",
          },
          {
            value: 1,
            label: "禁用",
          },
        ],
      },
      addRoleFormRules: {
        roleName: [{ required: true, trigger: "blur" }],
        remark: [{ required: true, trigger: "blur" }],
        status: [{ required: true, trigger: "blur" }],
      },
      //编辑
      editRoleDialog: false,
      editRoleForm: {
        roleName: "",
        remark: "",
        status: 0,
      },
      //添加弹窗数据源存放
      editRoleFormData: {
        statusOptions: [
          {
            value: 0,
            label: "正常",
          },
          {
            value: 1,
            label: "禁用",
          },
        ],
      },
      editRoleFormRules: {
        roleName: [{ required: true, trigger: "blur" }],
        remark: [{ required: true, trigger: "blur" }],
        status: [{ required: true, trigger: "blur" }],
      },
      //角色权限
      tableRolePermissionData: [],
      editRolePermissionDialog: false,
      editRolePermissionRoleId: 0,
      editRolePermissionCheckIds: [],
      editRolePermissionOperationDialog: false,
      editRoleOperationCheckIds: [],
      editRoleOperationId: 0,
      tableRoleMenuOperationData: [],
      tableRoleOperationData: [],
      editbtnLoad: false,
      btnLoad: false,
      loading: false,
      pageSizes: [5, 10, 20, 30, 50],
      pageSize: 10,
      pageNo: 1,
      total: 0,
      isEdit: false,
      dialogTitle: "新增角色",
      tag: "add",
      //角色用户相关
      viewRoleUserDialog: false,
      tableRoleUserData: [],
    };
  },
  mounted() {
    this.selectlist();
  },
  methods: {
    getRowKeys(row) {
      //唯一值
      // console.log(row.id)
      return row.menuId;
    },
    // 新增
    add() {
      this.addRoleDialog = true;
    },
    // 初始化数据
    selectlist() {
      this.loading = true;
      this.tableData = [];
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        roleName: this.rolForm.roleName,
        status: this.rolForm.status,
      };
      roleList(params)
        .then((response) => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 重置表单
    resetRoleForm() {
      this.addRoleForm = {
        roleName: "",
        remark: "",
        status: 1,
      };
      this.addRoleDialog = false;
    },
    // 提交角色弹框
    addRoleSubmit() {
      this.$refs.addRoleFormRef.validate((valid) => {
        if (valid) {
          this.btnLoad = true;
          this.addRoleForm.status = parseInt(this.addRoleForm.status);
          // 新增角色
          addRole(this.addRoleForm)
            .then((response) => {
              console.log(response);
              this.btnLoad = false;
              this.resetRoleForm();
              this.selectlist();
            })
            .catch((res) => {
              this.btnLoad = false;
              this.resetRoleForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑查看
    edit(roleId) {
      this.editRoleDialog = true;
      viewRole(roleId)
        .then((response) => {
          this.editRoleForm = response.data;
        })
        .catch(() => {});
    },
    // 编辑重置
    editResetRoleForm() {
      this.editRoleForm = {
        roleName: "",
        remark: "",
        status: 1,
      };
      this.editRoleDialog = false;
    },
    // 编辑提交
    editRoleSubmit() {
      this.$refs.editRoleFormRef.validate((valid) => {
        if (valid) {
          this.editbtnLoad = true;
          this.editRoleForm.status = parseInt(this.editRoleForm.status);

          // 编辑角色
          updateRole(this.editRoleForm)
            .then((response) => {
              console.log(response);
              this.editbtnLoad = false;
              this.editResetRoleForm();
              this.selectlist();
            })
            .catch((res) => {
              this.editbtnLoad = false;
              this.editResetRoleForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    deleteRow(roleId) {
      this.$confirm(`确定要删除该角色么？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteRole(roleId)
            .then((resp) => {
              this.selectlist();
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
    //保存权限相关
    editPermission(roleId) {
      this.editRolePermissionDialog = true;
      this.editRolePermissionRoleId = roleId;
      viewRolePermission(roleId)
        .then((response) => {
          //将已选的数据筛选出来在进行选中
          this.tableRolePermissionData = response.data.rows;
          response.data.rows.forEach((val) => {
            this.tableRolePermissionCheck(val);
          });
        })
        .catch(() => {});
    },
    tableRolePermissionCheck(data) {
      if (data.permission) {
        this.$refs.multipleRolePermissionTable.toggleRowSelection(data, true);
      }

      if (data.hasChild) {
        data.children.forEach((var1) => {
          this.tableRolePermissionCheck(var1);
        });
      }
    },
    // 保存权限取消
    editResetRolePermissionForm() {
      this.editRolePermissionDialog = false;
      this.editRolePermissionRoleId = 0;
    },
    handleRolePermissionSelectionChange(val) {
      this.editRolePermissionCheckIds = val.map((v) => {
        return v.menuId;
      });
    },
    // 保存权限权限
    saveRolePermissionSubmit() {
      var data = {
        roleId: this.editRolePermissionRoleId,
        menuIds: this.editRolePermissionCheckIds,
      };
      saveRolePermission(data)
        .then((response) => {
          if (response.code === 200) {
            Message.success(response.message);
          }
        })
        .catch(() => {});
    },
    //保存权限接口重置
    editResetRoleOperation() {
      this.editRolePermissionOperationDialog = false;
      this.editRolePermissionRoleId = 0;
      this.editRoleOperationId = 0;
      this.tableRoleMenuOperationData = [];
      this.tableRoleMenuOperationData = [];
      this.tableRoleOperationData = [];
    },
    //保存权限接口
    editPermissionOperation(roleId) {
      this.editRolePermissionOperationDialog = true;
      this.editRolePermissionRoleId = roleId;
      viewRolePermission(roleId)
        .then((response) => {
          //将已选的数据筛选出来在进行选中
          this.tableRolePermissionData = response.data.rows;
          response.data.rows.forEach((val) => {
            this.tableRolePermissionCheck(val);
          });
        })
        .catch(() => {});
    },
    //权限操作相关
    roleMenuOperationInit(row) {
      viewRoleMenuOperation(row.menuId)
        .then((response) => {
          this.tableRoleMenuOperationData = response.data.rows;
        })
        .catch(() => {});
    },
    getRoleOperationRowKeys(row) {
      return row.filedName;
    },
    roleOperationInit(row) {
      var roleId = this.editRolePermissionRoleId;
      var operationId = row.operationId;
      this.editRoleOperationId = operationId;
      viewRoleOperation(roleId, operationId)
        .then((response) => {
          this.tableRoleOperationData = response.data.rows;
          response.data.rows.forEach((val) => {
            if (val.hidden) {
              this.$refs.multipleRoleOperationTable.toggleRowSelection(
                val,
                true
              );
            }
          });
        })
        .catch(() => {});
    },
    handleRoleOperationSelectionChange(val) {
      this.editRoleOperationCheckIds = val.map((v) => {
        return v.filedName;
      });
    },
    // 保存权限操作
    saveRoleOperationSubmit() {
      if (this.editRoleOperationId == 0) {
        Message.error("请选择操作！");
        return;
      }
      var data = {
        roleId: this.editRolePermissionRoleId,
        menuOperationId: this.editRoleOperationId,
        hiddenFileds: this.editRoleOperationCheckIds,
      };
      saveRoleOperation(data)
        .then((response) => {
          if (response.code === 200) {
            Message.success(response.message);
          }
        })
        .catch(() => {});
    },
    //角色用户信息展示
    viewRoleUser(roleId) {
      this.viewRoleUserDialog = true;
      userListByRoleId(roleId)
        .then((response) => {
          this.tableRoleUserData = response.data.rows;
        })
        .catch(() => {});
    },
  },
};
</script>


<style lang="scss" >
.flex-div {
  display: flex;
  width: 100%;
  gap: 15px;
}
.dolaog .el-dialog__body {
  width: 100%;
  max-height: 500px !important;
  overflow: auto;
}
.operationIcon {
  margin-left: 10px;
}
</style>